<template>
	<div v-if="Free_phone_dialogVisible" class="dialog-mask" @click="close_dialog">
		<div style="position: relative;">
			<img class="base_img" src="../assets/free_phone_dialog.png" alt="" width="350" height="380" />
			<div class="content-box">
				<div class="colours_font flex_center_center" style="padding-left: 16px;">
					<span class="char1">锦</span>
					<span class="char2">田</span>
					<span class="char3">云</span>
				</div>
				<div class="colours_font flex_center_center"><img src="../assets/coloured_ribbon.png" width="30" height="30" />
					<span class="char1">福</span>
					<span class="char2">利</span>
					<span class="char3">来</span>
					<span class="char4">袭</span>
				</div>
				<div class="flex_center_center" style="color: #306688;font-size: 18px;margin: 10px 0;">免 费 试 用 云 真 机</div>
				<div class="button_box flex_center_center">
					<button class="flex_between_center" @click="Get_Coupon"><img src="../assets/fire.png" width="30" height="30" />&emsp;<span>体 验 试 用</span></button>
				</div>
				<div><img src="../assets/tushengxiang_wechat.jpg" alt="" width="130" height="130" /></div>
				<div class="bottom_box flex_center_center"><img src="../assets/gift.png" width="30" height="30" />更多惊喜添加客服,敬请期待!</div>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '@/utils'
	export default {
		name: 'Free_phone_dialog',
		props: {
			"Free_phone_dialogVisible": { //接收父组件传参控制弹框是否显示
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				
			};
		},
		methods:{
			//领取试用劵
			Get_Coupon(){
				const requestData={
					"payment_source":"trial"
				}
				const response = request.post('/products/payment', requestData)
				var Userdata_obj=JSON.parse(JSON.stringify(this.$store.state.Userdata))
				Userdata_obj.usedCoupon=1
				response.then((res)=>{
					if(res.data.code==200){
						this.$store.commit('localStorage_userdata', Userdata_obj)
						this.$store.commit('updateTryOutDialogClose', false)
						this.$store.commit('setForceShowFreePhoneDialog', false)
						this.$router.push('/my_phone')
					}
				})
			},
			close_dialog(){
				// this.$emit('update:Free_phone_dialogVisible', false)
				this.$store.commit('updateTryOutDialogClose', true)
			}
		}
	}
</script>

<style lang="less" scoped>
	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: opacity 0.3s ease;
	}

	.base_img {
		border-radius: 20px;
	}

	.content-box {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		padding: 20px;
		box-sizing: border-box;
		
		.colours_font {
			font-size: 30px;
			font-weight: 900;
			span {
				background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
				display: inline-block;
			}
		}
	}
	.button_box{
		margin: 10px 0;
		button{
			color: #fff;
			background-color: #fb5702;
			border-radius: 6px;
			padding: 5px 20px;
			font-weight: 600;
			border: none;
			font-size: 20px;
			cursor: pointer;
		}
	}
	.bottom_box{
		position: absolute;
		bottom: 20px;
		width: 92%;
		color:#31698c;
		font-weight: 900;
		font-size: 18px;
	}
	.char1 {
		background-image: linear-gradient(to bottom, #5ab8e3, #2e6ccc);
	}

	.char2 {
		background-image: linear-gradient(to bottom, #48a1d9, #2b54c8);
	}

	.char3 {
		background-image: linear-gradient(to bottom, #418fd6, #2341c3);
	}

	.char4 {
		background-image: linear-gradient(to bottom, #397cd1, #1d2ebf);
	}
</style>